<template>
	<div class="writing titleGeneration">
		<Nav></Nav>
		<div class="writing_right">

		<div class="writing_right_content">
        <div class="titleGenerationTitle">
          <div class="titleGenerationTitle_list"><img src="@a/img/sv47.svg" />您输入关键词，以及生成的数量提交任务后任务会在后台自动完成标题及文章创作。<br>这种方法适合生成大量的文章标题。</div>
        </div>



        <div class="BHosting">
          <div class="BHostingNav on">
            <div class="BHostingNavList active">
              <span><img src="@a/img/sv64.svg" /><img src="@a/img/sv64on.svg" /></span><b>创建任务</b>
            </div>
            <a href="#/writing/titleGeneration/BackgroundHostingList" class="BHostingNavList">
              <span><img src="@a/img/sv65.svg" /><img src="@a/img/sv65on.svg" /></span><b>任务列表</b>
            </a>
          </div>
          <div class="BHostingContent">
            <div class="BHostingContent_create">
				
              <div class="BHostingContent_create_list textarea">
                <div class="create_list_left">关键词</div>
                <div class="create_list_right">
                  <el-input
                    placeholder="例:教育培训,培训机构,培训课程,培训网,培训班哪家好"
                    v-model="postData.keywords">
                  </el-input>
                </div>
              </div>				

              <div class="BHostingContent_create_list">
                <div class="create_list_left">存放分类</div>
                <div class="create_list_right">
                  <el-select v-model="postData.article_class_id" placeholder="存放分类">
                    <el-option
                      v-for="(item,index) in class_types_inc"
                      :key="item.value"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>

              <div class="BHostingContent_create_list">
                <div class="create_list_left">生成语言</div>
                <div class="create_list_right">
                  <el-select v-model="postData.lang" placeholder="中文（简体）">
                    <el-option
                      v-for="(item,index) in lang_inc"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
			  
              <div class="BHostingContent_create_list">
                <div class="create_list_left">生成数量</div>
                <div class="create_list_right">
                  <el-select v-model="postData.num" placeholder="">
                    <el-option
                      v-for="item in num_inc"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>	
						
              <div class="BHostingContent_create_list">
                <div class="create_list_left">文章字数</div>
                <div class="create_list_right">
                  <el-select v-model="postData.length" placeholder="">
                    <el-option
                      v-for="item in length_inc"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>							

              <div class="BHostingContent_create_list">
                <div class="create_list_left">审核方式</div>
                <div class="create_list_right">
                  <el-select v-model="postData.check_type" placeholder="中文（简体）">
                    <el-option
                      v-for="item in check_types_inc"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
			  
              <div class="BHostingContent_create_list">
                <div class="create_list_left">违禁词</div>
                <div class="create_list_right">
                  <el-select v-model="postData.forbiddenwords_id" placeholder="当AI创作的文章出现违禁词时会自动替换">
                    <el-option
                      v-for="item in forbiddenwords_inc"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>			  

              <div class="BHostingContent_create_list textarea">
                <div class="create_list_left">备注</div>
                <div class="create_list_right">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="备注内容"
                    v-model="postData.remark">
                  </el-input>
                </div>
              </div>
              <div class="BHostingContent_create_list integral">
                <div class="create_list_left">消耗积分</div>
                <div class="create_list_right">
                  <div class="list_right_top"><span>{{postData.num}}</span>篇文章 x<span>{{article_point}}</span>积分/篇 = <span>{{postData.num*article_point}}</span> 积分</div>
                  <div class="list_right_btn" @click="subPost()">提交任务</div>
                  <div class="list_right_bottom"><img src="@a/img/sv47.svg" />生成文章的时候会自动标题去重</div>
                </div>
              </div>
            </div>
          </div>
        </div>

			</div>


		</div>


		<!-- 充值弹窗 -->
		<rechargeWindow v-if="rechargeShow" @close="rechargeShow = false"></rechargeWindow>


	</div>



</template>

<script>
	import {
		MessageBox,
		Message
	} from 'element-ui';
	import {
		Loading
	} from 'element-ui';
	import loginWindow from "@c/common/loginWindow/loginWindow";
	import rechargeWindow from "@c/common/rechargeWindow/rechargeWindow";
	import Nav from "@c/common/nav/nav";

	export default {
		name: "titlegeneration",
		data() {
			return {
				showLogin : false,
				postData:{
					keywords:'',
					article_class_id:0,
					lang:'中文',
					check_type:0,
					forbiddenwords_id:'',
					num:500,
					length: 2000,//默认文章字数
					remark:'',
				},
				class_types_inc:[],//文章分类
				check_types_inc: [{
					value: 0,
					label: '自动审核'
				}, {
					value: 1,
					label: '人工审核'
				}],
				forbiddenwords_inc:[],//违禁词
				num_inc:[200,300,500,800,1000,2000],
				length_inc: [2500,2000,1500,1000,600],//文章字数选项
				article_point:0,//每篇文章消耗积分
				
			}
		},

		created() {			
			//获取分类
			this.axios.get('/api/articleClass/list').then(res => {
				this.class_types_inc = res.result
				let article_class_id = this.$route.query.article_class_id;
				if(article_class_id){
					article_class_id = parseInt(article_class_id)
					this.postData.article_class_id=article_class_id;
					//查询最近一次的创建记录，复制里面的关键词
					this.axios.get('/api/articleTitleTask/getContent',{
						params: {
								article_class_id:article_class_id
							}
						}).then(res => {
							if(res.result){
								this.postData.keywords=res.result.keywords
							}
					})
					//
				}else{
					this.postData.article_class_id = this.class_types_inc[0].id
				}	
			})
			//语言
			this.axios.get('/api/ArticleTitle/getLanguage').then(res => {
				this.lang_inc = res.result;
			})
			//违禁词
			this.axios.get('/api/ArticleForbiddenwords/getForbiddenName').then(res => {
				this.forbiddenwords_inc = res.result;
			})			
			//每篇文章消耗积分
			this.axios.get('/api/ArticleTitle/getArticlePoint').then(res => {
				this.article_point = res.result;
			})
		},
		components: {
			loginWindow,
			Nav,
			rechargeWindow
		},
		computed: {
			
		},
		methods: {
			changeTab(index) {
				this.activeTab = index;
			},
			changeBHostingNav(index) {
				this.BHostingNav = index;
			},
			//提交任务
			subPost(){
				if (this.postData.keywords.length < 4) {
					Message.error('关键词不能少于4个字符');
					return false;
				}
				this.axios.post('/api/ArticleTitleTask/addTitleTask', this.postData).then(res => {
					if(res.code === 1) {
						this.$router.push('/writing/titleGeneration/BackgroundHostingList');					
					}
				})
			},

		},
	}
</script>

<style>
	@import "titleGeneration.css";
</style>